<script>
import BugItem from "@/components/bugList综合案例/BugItem.vue";

export default {
  name: "BugList",
  data(){
    return {
      bugList : [
        {id : '001' , desc : 'BUG描述信息100' , resolved : false},
        {id : '002' , desc : 'BUG描述信息200' , resolved: true},
        {id : '003' , desc : 'BUG描述信息300' , resolved: false}
      ]
    }
  },
  components : {BugItem}
}
</script>

<template>
  <div>
    <table>
      <thead>
      <tr>
        <th class="c1">全选 <input type="checkbox"></th>
        <th>bug描述</th>
        <th class="c2">操作</th>
      </tr>
      </thead>
      <tbody>
      <BugItem v-for="bug of bugList" :key="bug.id" :bug="bug"></BugItem>
      </tbody>
    </table>
  </div>
</template>

<style scoped>
/* list */
table{
  width: 40%;
  border-collapse: collapse;
}
table caption{
  font-size: 1em;
  font-weight: bold;
  margin: 1em 0;
}
.c1,.c2{
  width: 100px;
}
th {
  border: 1px solid #999;
  text-align: center;
  padding: 5px 0;
}
table thead tr{
  background-color: #008c8c;
  color: #fff;
}
</style>